Dependências

• CLI do Shopify: uma ferramenta de interface de linha de comando que ajuda você a desenvolver e gerenciar seus temas do Shopify.
• TailwindCSS: uma estrutura CSS utilitária para a construção rápida de designs personalizados.

Configurar

Estamos usando o Tailwind como uma ferramenta CLI independente. Para mais informações, você pode consultar o guia oficial.

Nota: Se você estiver configurando isso em um Mac com processador Intel, substitua macos-arm64 por macos-x64 nos comandos abaixo.

1. Baixe o binário TailwindCSS mais recente para macOS com arquitetura ARM64:

   curl -sLO https://github.com/tailwindlabs/tailwindcss/releases/latest/download/tailwindcss-macos-arm64

2. Torne o arquivo baixado executável:

   chmod x tailwindcss-macos-arm64

3. Mova o executável para um nome mais conveniente:

   mv tailwindcss-macos-arm64 tailwindcss

4. Execute o observador TailwindCSS:

   • Este comando observará alterações em seu arquivo de origem TailwindCSS (./assets/tailwind.css) e compilará a saída em seu arquivo CSS desejado (./assets/style.css):

     ./tailwindcss -i ./assets/tailwind.css -o ./assets/style.css --watch

Publicar

Quando estiver pronto para compilar seu CSS para produção, você deve usar o seguinte comando para minificar seu CSS:

./tailwindcss -i ./assets/tailwind.css -o ./assets/style.css --minify

Este comando pegará seu arquivo CSS de entrada (./assets/tailwind.css), processá-lo-á com TailwindCSS e produzirá um arquivo CSS reduzido (./assets/style.css) otimizado para produção.

Conclusão

Seguindo essas etapas, você configurou com sucesso o TailwindCSS como uma ferramenta CLI independente e o integrou ao seu projeto. Esta configuração permite que você desenvolva e gerencie seu CSS com eficiência usando a abordagem de utilidade do Tailwind. A execução do observador garante que seu CSS seja compilado automaticamente durante o desenvolvimento, enquanto a etapa de minificação prepara seu CSS para produção, otimizando-o para desempenho. Esse processo simplificado ajuda a manter uma base de código limpa e fácil de manter, permitindo que você se concentre na construção e personalização do seu tema do Shopify com facilidade.